<template>
	<view>
		<view class="rounded overflow-h pt-3">
			<view class="bg-primary mx-3 py-2 rounded">
				<u-grid :col="4" hover-class="none">
					<block v-for="(item, index) in navList" :key="index">
						<u-grid-item>
							<view>{{ item.count }}</view>
							<view>{{ item.name }}</view>
						</u-grid-item>
					</block>
				</u-grid>
			</view>
		</view>

		<view class="p-2">
			<u-grid :col="3" hover-class="none" :border="false">
				<block v-for="(item, index) in deviceList" :key="index">
					<!--   -->
					<u-grid-item bg-color="transparent" :custom-style="{ padding: '10rpx', height: '100%'}">
						<view class="rounded w-100 d-flex flex-column a-center j-center p-3 bg-white shadow"
							:class="{'filter': item.deviceState == 0}" @click.capture="clickDevice(item)">
							<u-image width="100rpx" height="100rpx" :src="item.img || '/static/1.png'"></u-image>
							<view class="font-hidden line-h pt-2">{{ item.deviceName }}</view>
						</view>
					</u-grid-item>
				</block>
			</u-grid>
		</view>

		<!-- 彈框-->
		<u-popup mode="bottom" :show="showPopup" :round="true" borderRadius="30" :closeable="true" @close="closePopup">
			<view>
				<view class="px-4 py-3 text-center font-md z-index-md font-hidden">
					{{ deviceName }}
				</view>
				<scroll-view scroll-y style="height: 36vh" v-show="isPopup==1">
					<view class="p-2">
						<u-grid :col="3" hover-class="none" :border="false">
							<block v-for="(item, index) in resultObject" :key="index">
								<u-grid-item bg-color="transparent" :custom-style="{ padding: '10rpx', height: '100%' }"
									@click.capture="ctlSwitch(item,index)">
									<view
										:class="['rounded w-100 d-flex flex-column j-center p-2 px-3', item.checked == true?'bg-primary':'bg-black text-white']">
										<u-image width="56rpx" height="56rpx"
											:src="item.checked == true?'/static/light-no.png':'/static/light-off.png'">
										</u-image>
										<view class="pt-2 pb-1 line-h-sm">{{item.name}}</view>
										<view class="font-ssm line-h d-flex a-center">
											<text v-show="item.checked == true"
												class="is-checked bg-white rounded mr-1"></text>
											<text>{{item.checked == true?'NO':'OFF'}}</text>
										</view>
									</view>
								</u-grid-item>
							</block>
						</u-grid>
					</view>
				</scroll-view>
				<scroll-view scroll-y style="height: 60vh" v-show="isPopup==2">
					<view class="p-2 text-primary">
						<view class="border border-primary rounded-md p-2">
							<template v-if="resultObject.switch == 0">
								<view class="font-big text-center">OFF</view>
							</template>
							<template v-else>
								<u-grid :col="3" hover-class="none" :border="false">
									<u-grid-item bg-color="transparent"
										:custom-style="{ padding: '10rpx', height: '100%' }">
										<view class="font-lllg font-wg-6" v-show="resultObject.temp">
											{{`${resultObject.temp} ℃`}}
										</view>
										<view class="pt-1" v-show="resultObject.room_temp">
											{{`${resultObject.room_temp} ℃`}}
										</view>
									</u-grid-item>
									<u-grid-item bg-color="transparent"
										:custom-style="{ padding: '10rpx', height: '100%' }"
										v-show="resultObject.model">
										<u-image width="70rpx" height="70rpx"
											:src="resultObject.model== 0?'/static/kt-1-2.png':'/static/kt-1-1.png'">
										</u-image>
										<view class="pt-1">{{resultObject.model== 0?'制冷':'制热'}}</view>
									</u-grid-item>
									<u-grid-item bg-color="transparent"
										:custom-style="{ padding: '10rpx', height: '100%' }"
										v-show="resultObject.speed">
										<u-image width="70rpx" height="70rpx"
											:src="resultObject.speed== 1?'/static/kt-2-1.png':resultObject.speed == 2?'/static/kt-2-2.png':'/static/kt-2-3.png'">
										</u-image>
										<view class="pt-1">
											{{resultObject.speed == 1?'低':resultObject.speed == 2?'中':'高'}}
										</view>
									</u-grid-item>
								</u-grid>

							</template>
						</view>
						<view class="d-flex py-4">
							<view>
								<u-image width="85rpx" height="85rpx"
									:src="resultObject.switch== 0?'/static/switch-off.png':'/static/switch-no.png'"
									@click="clickDeviceTemperatureControl('switch',resultObject)">
								</u-image>
							</view>
							<view class="flex-1 d-flex j-center" v-show="resultObject.switch== 1">
								<view
									class="air-btn d-flex flex-column a-center j-sb border border-primary rounded-md p-2">
									<view class="flex-1 pt-1"
										@click="clickDeviceTemperatureControl('temp',resultObject,resultObject.temp+1)">
										<u-image width="50rpx" height="50rpx" src="/static/kt-up.png">
										</u-image>
									</view>
									<view class="flex-1 d-flex a-end pb-1"
										@click="clickDeviceTemperatureControl('temp',resultObject,resultObject.temp-1)">
										<u-image width="50rpx" height="50rpx" src="/static/kt-down.png">
										</u-image>
									</view>
								</view>
							</view>
						</view>
						<u-grid :col="2" hover-class="none" :border="false" v-show="resultObject.switch== 1">
							<u-grid-item bg-color="transparent" :custom-style="{ padding: '10rpx', height: '100%' }"
								@click="clickDeviceTemperatureControl('model',resultObject)">
								<u-image width="80rpx" height="80rpx" src="/static/kt-1.png">
								</u-image>
								<view class="pt-1">模式</view>
							</u-grid-item>
							<u-grid-item bg-color="transparent" :custom-style="{ padding: '10rpx', height: '100%' }"
								@click="clickDeviceTemperatureControl('speed',resultObject)">
								<u-image width="80rpx" height="80rpx" src="/static/kt-2.png">
								</u-image>
								<view class="pt-1">风速</view>
							</u-grid-item>
						</u-grid>
					</view>
				</scroll-view>
				<scroll-view scroll-y style="height: 36vh" v-show="isPopup==3">
					<view class="px-4" style="padding-top: 20px;">
						<u-button type="success" @click="ctrlDeviceOpenDoor">点击开门</u-button>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let siteInfoId = '53e9be60-d4c2-4a8c-97fd-10688a5020a8'
	let authKey = 'bce11724-e075-4be7-bd8c-04bfd0ceed4c'
	export default {
		data() {
			return {
				navList: [],
				deviceList: [],
				showPopup: false,
				deviceName: '',
				resultObject: [],
				isPopup: ''
			};
		},
		methods: {
			// 关闭弹框
			closePopup() {
				this.resultObject = [];
				this.showPopup = false;
			},
			// 点击设备
			clickDevice(item) {
				this.deviceName = item.deviceName;
				this.isPopup = item.isPopup;
				if (item.battery == undefined) {
					item.battery = 100
				}
				if (item.deviceState == 1) {
					const {
						deviceCode,
						deviceId,
						deviceSubType,
						deviceName,
						battery,
						isPopup
					} = item;
					this.deviceInfo = {
						deviceCode,
						deviceId,
						deviceSubType,
						deviceName,
						battery,
						isPopup
					};
					switch (Number(item.isPopup)) {
						case 0:
							let params = {
								deviceName: this.deviceName,
								siteId: siteInfoId,
								...this.deviceInfo
							}
							uni.navigateTo({
								url: `/pages/deviceLog/deviceLog?params=${encodeURIComponent(JSON.stringify(params))}`,
							});

							break;
						case 1: // 开关按钮
						case 2: // 温控面板
							this.getSingleDeviceRequest({
								deviceCode,
								deviceId,
								deviceSubType,
								isPopup
							});
							this.$nextTick(() => {
								this.showPopup = true;
							});
							break;
						case 3: // 门禁
							this.$nextTick(() => {
								this.showPopup = true;
							});
							break;
					}
				}else {
					uni.showToast({
						icon: 'none',
						title: '离线设备'
					})
				}
			},
			// 获取所有场所信息
			allList() {
				this.$api.allList().then(res => {});
			},
			// 获取所有场所信息
			getAllDeviceBySiteId() {
				this.$api.getAllDeviceBySiteId({
					siteInfoId: siteInfoId,
					authKey: authKey
				}).then(result => {
					this.deviceList = result.data.allDeviceInfos;
					this.navList = result.data.navList;
				});
			},
			getSingleDeviceRequest(obj) {
				this.$api
					.getSingleDeviceRequest({
						authKey: authKey,
						siteId: siteInfoId,
						...obj
					})
					.then(result => {
						this.resultObject = result.data;
						uni.hideLoading();
					});
			},
			ctlSwitch(item, index) {
				const {
					deviceSubType,
					deviceCode,
					deviceId,
					isPopup
				} = this.deviceInfo;

				uni.showLoading({
					title: '执行中...',
					mask: true
				});
				this.$api
					.ctlSwitch({
						siteId: siteInfoId,
						authKey: authKey,
						deviceSubType,
						deviceCode,
						deviceId,
						isPopup,
						sw: item.sw,
						checked: !item.checked
					})
					.then(result => {
						item.checked = result.data[index].checked
						uni.hideLoading();
					});
			},
			// 温控面板-点击按键
			clickDeviceTemperatureControl(txt, resultObject, temp) {
				uni.showLoading({
					title: '执行中...',
					mask: true
				});
				let obj = {}
				obj.deviceCode = this.deviceInfo.deviceCode
				obj.deviceId = this.deviceInfo.deviceId
				obj.isPopup = this.deviceInfo.isPopup
				obj.sw = txt
				if (txt == 'switch') {
					obj.checked = resultObject.switch == 0 ? 1 : 0
				}
				if (txt == 'model') {
					obj.checked = resultObject.model == 0 ? 1 : 0
				}
				if (txt == 'speed') {
					obj.checked = resultObject.speed == 1 ? 2 : resultObject.speed == 2 ? 3 : 1
				}
				if (txt == 'temp') {
					obj.checked = temp
				}

				this.$api.ctlSwitch({
					siteId: siteInfoId,
					authKey: authKey,
					...obj
				}).then(result => {
					this.resultObject = result.data;
					uni.hideLoading();
				});
			},
			// 门禁-点击按键
			ctrlDeviceOpenDoor() {
				uni.showLoading({
					title: '执行开门中...',
					mask: true
				});
				let obj = {}
				obj.deviceCode = this.deviceInfo.deviceCode
				obj.siteId = siteInfoId
				this.$api.ctrlDeviceOpenDoor({
					...obj
				}).then(result => {
					uni.hideLoading();
					if (result.data > 0) {
						// 成功
						uni.showToast({
							icon: 'success',
							title: '开门成功！'
						})
					} else {
						uni.showToast({
							icon: 'error',
							title: '开门失败！'
						})
					}
				});
			}
		},
		onLoad() {
			this.allList()
			this.getAllDeviceBySiteId()
		}
	};
</script>

<style scoped>
	.filter {
		filter: grayscale(100%);
		filter: gray;
		opacity: .6;
	}

	.is-checked {
		width: 12rpx;
		height: 12rpx;
	}

	.air-btn {
		width: 200rpx;
		height: 300rpx;
	}
</style>
